import "./App.css";
// 导入组件
import UseStateDemo from "./components/001UseStateDemo";
import UseStyleDemo from "./components/002UseStyle";
import BiliCommentDemo from "./components/003BiliBiliComment";
import FormStateDemo from "./components/004FormState";
import DomDemo from "./components/005Dom";
import ComponentConnect from "./components/006ComponentConnectFs";
import ComponentConnectSfDemo from "./components/007ComponentsConnectSf";
import BroComponentConnectDemo from "./components/008BroComponentConnect";
import GrandComponentsConnectDemo from "./components/009GrandComponentsConnect";
import UseEffectDemo from "./components/010UseEffectDemo";
import HookDemo from "./components/011Hook";
import Counter from "./components/012Store(redux)";
import StoreExample from "./components/013StoreExample";
import GetChannelPlus from "./components/014GetChannelPlus";
// 外部声明js
const ddd = 100;
const ccc = () => {
  return 200;
};

const list = [
  { id: 1, name: "张三", age: 18 },
  { id: 2, name: "李四", age: 18 },
  { id: 3, name: "王五", age: 18 },
];

const isLogin = true;

// 事件绑定
const handelClick = (e: React.MouseEvent) => {
  alert("点击了按钮");
  console.log(e);
};

// 传递参数
const handelClickElment = (name: string) => {
  console.log(name);
};

// 既传递参数，也传递事件对象
const handelClickElmentAnd = (name: string, e: React.MouseEvent) => {
  console.log(name, e);
};

// 组件
const Btn = () => {
  return <button>按钮按钮</button>;
};

function App() {
  return (
    // html内容开始
    <>
      {/* 使用函数 */}
      {ccc()}
      {/* 使用变量 */}
      {ddd}
      {/* 使用行内样式 */}
      <div className="card" style={{ color: "red" }}>
        {"this is message"}
        {/* 时间绑定 */}
        <button onClick={handelClick}>点击</button>
        <button onClick={() => handelClickElment("jack")}>传递参数</button>
        <button onClick={(e) => handelClickElmentAnd("jack", e)}>
          既传递参数，也传递事件对象
        </button>
      </div>
      <ul style={{ listStyle: "none" }}>
        {/* 列表渲染循环 */}
        {list.map((item) => (
          <li key={item.id}>{item.name}</li>
        ))}
      </ul>
      {/* 条件渲染 */}
      {isLogin && <span>登录成功</span>}
      {isLogin ? <span>登录成功</span> : <span>登录失败</span>}
      {/* 001使用组件 */}
      {/* 组件首字母必须大写 */}
      <Btn />
      <p>001使用组件+useState()：</p>
      {/* 使用外部组件 */}
      <UseStateDemo />
      {/* 002使用样式 */}
      <p>002使用样式：</p>
      <UseStyleDemo />
      {/* 003B站评论组件 */}
      <p>003B站评论组件：</p>
      <BiliCommentDemo />
      {/* 004表单状态 */}
      <p>004表单数据绑定</p>
      <FormStateDemo />
      {/* 005获取Dom */}
      <p>005获取Dom：</p>
      <DomDemo />
      {/* 006同页面父传子组件连接 */}
      <p>006同页面父传子组件通信：</p>
      <ComponentConnect />
      {/* 007同页面子传父组件通信： */}
      <p>007同页面子传父组件通信：</p>
      <ComponentConnectSfDemo />
      {/* 008兄弟组件通信 */}
      <p>008兄弟组件通信：</p>
      <BroComponentConnectDemo />
      {/* 009跨级组件通信 */}
      <p>009跨级组件通信：</p>
      <GrandComponentsConnectDemo />
      {/* 010useEffect */}
      <p>010异步请求useEffect：</p>
      <UseEffectDemo />
      {/* 011自定义Hook */}
      <p>011自定义Hook：</p>
      <HookDemo />
      {/* 012Store(redux) */}
      <p>012Store(redux)：</p>
      <Counter />
      {/* 013StoreExample */}
      <p>013StoreExample数据使用实例：</p>
      <StoreExample />
      {/* 014GetChannelPlus */}
      <p>014GetChannelPlus：</p>
      <GetChannelPlus />
    </>
    // html内容结尾
  );
}

export default App;
